<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>OneLove</title>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" ></script>
    	
		<script src="http://www.kelvinluck.com/assets/jquery/jScrollPane/scripts/jScrollPane.js" type="text/javascript"></script>
		
		<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

		 <STYLE type="text/css">
		 
			
		/** Header n Footer	**/
		
		.utility_nav{
		 list-style-type : none;
		 float : right;
		}
		
		.logo_nav{
		 list-style-type : none;
		 float : left;
		}
		
		.utility_nav > li{
		    width:fixed;
  			position:relative;	
  			float:left;
  			margin:10px;
		}
		
		#header{
		border:1px solid;
		height: 40px ; /** Temporary... this will go away when logo image is added **/
		}
		
		#footer{
		border:1px solid;
		position:relative;
		display: block;
			height: 40px ; /** Temporary... this will go away when logo image is added **/
		}
	    
		/** Header n Footer **/
		
		
		
         </STYLE>
    	 <script>
    	 $(document).ready(function() {
    	        chart = new Highcharts.Chart({
    	            chart: {
    	                renderTo: 'container'
    	            },
    	            title: {
    	                text: 'Students Performance on Assignment '
    	            },
    	            xAxis: {
    	                categories: ['Question1', 'Question2', 'Question3', 'Question4', 'Question5']
    	            },
    	            tooltip: {
    	                formatter: function() {
    	                    var s;
    	                    if (this.point.name) { // the pie chart
    	                        s = ''+
    	                            this.point.name +': '+ this.y +' %Correct';
    	                    } else {
    	                        s = ''+
    	                            this.x  +': '+ this.y;
    	                    }
    	                    return s;
    	                }
    	            },
    	            labels: {
    	                items: [{
    	                    html: 'Assignment Performance',
    	                    style: {
    	                        left: '40px',
    	                        top: '8px',
    	                        color: 'black'
    	                    }
    	                }]
    	            },
    	            series: [{
    	                type: 'column',
    	                name: 'Jane',
    	                data: [1, 2, 1, 9, 4]
    	            }, {
    	                type: 'column',
    	                name: 'John',
    	                data: [1, 3, 5, 9, 6]
    	            }, {
    	                type: 'column',
    	                name: 'Joe',
    	                data: [0.5, 3, 3, 9, 0]
    	            }, {
    	                type: 'spline',
    	                name: 'Average',
    	                data: [0.75, 2.67, 3, 9, 3.33],
    	                marker: {
    	                    lineWidth: 2,
    	                    lineColor: Highcharts.getOptions().colors[3],
    	                    fillColor: 'white'
    	                }
    	            }, {
    	                type: 'pie',
    	                name: 'Total consumption',
    	                data: [{
    	                    name: 'Jane',
    	                    y: 13,
    	                    color: '#4572A7' // Jane's color
    	                }, {
    	                    name: 'John',
    	                    y: 23,
    	                    color: '#AA4643' // John's color
    	                }, {
    	                    name: 'Joe',
    	                    y: 19,
    	                    color: '#89A54E' // Joe's color
    	                }],
    	                center: [100, 80],
    	                size: 100,
    	                showInLegend: false,
    	                dataLabels: {
    	                    enabled: false
    	                }
    	            }]
    	        });
    	    });
    	</script>

	</head>
	<body>
	<div class="wrap">
	  <header id="header">
	   
	   <ul class="logo_nav">
     	 <li>LOGO<li> 
      </ul>
      
     <ul class="utility_nav">
      <li>LOGO<li> 
      <li>Home</li>
      <li>Inbox</li>
      <li>Help</li>
      <li>Teacher Name</li>
    </ul>
   
    </header>
	</div>   


<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
	</body>
</html>